<template>
    <view>
        <z-paging
            ref="paging"
            v-model="dataList"
            :refresher-out-rate="0.8"
            auto-scroll-to-top-when-reload
            safe-area-inset-bottom
            bg-color="#fff"
            empty-view-img="https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/10/12/987eadb1d50949a0a7e25dbbd99abe30.png"
            @query="queryList"
        >
            <view slot="top">
                <view class="search">
                    <u-search
                        placeholder="请输入商品名称"
                        v-model="keyword"
                        bgColor="#E7E7E7"
                        color="#333"
                        placeholderColor="#999999"
                        clearabled
                        height="64rpx"
                        @custom="keywordSearch"
                        :actionStyle="actionStyle"
                    />
                </view>
                <u-tabs
                    :list="navList"
                    @click="click"
                    @change="changeType"
                    :current="current"
                    :scrollable="false"
                    :inactiveStyle="inactiveStyle"
                    :activeStyle="activeStyle"
                    lineColor="#588BF3"
                ></u-tabs>
            </view>
            <view class="bottom" slot="bottom">
                <u-button
                    text="发布商品"
                    color="#1682FF"
                    shape="circle"
                    @click="to_orderClass()"
                />
            </view>
            <view class="item" v-for="(item, index) in dataList" :key="index">
                <view
                    class="item_detail flex_wrap row_between"
                    @click="toreciveList(item)"
                >
                    <u-image
                        height="156rpx"
                        width="156rpx"
                        :src="item.thumbnail"
                        mode="aspectFill"
                        radius="8rpx"
                    />
                    <view>
                        <text class="total">{{ item.goodsName }}</text>
                        <u-gap height="40rpx" />
                        <view class="flex_wrap row_between">
                            <u-text
                                v-if="item.price"
                                :text="
                                    '￥' +
                                    formatDecimal(numDiv(item.price, 100))
                                "
                                size="32rpx"
                                color="#FF0000"
                            ></u-text>
                            <u-text
                                v-else
                                :text="'￥' + 0"
                                size="32rpx"
                                color="#FF0000"
                            ></u-text>
                            <u-text
                                :text="'库存' + item.quantity"
                                size="28rpx"
                                align="right"
                                color="#777"
                            ></u-text>
                        </view>
                    </view>
                </view>
                <view
                    class="button flex_wrap row_between"
                    style="padding: 12rpx 24rpx 16rpx"
                >
                    <u-text
                        v-if="[1, 3].includes(item.checkStatus)"
                        :text="checkStatusList[item.checkStatus]"
                        :color="item.checkStatus === 3 ? '#EF5B4D' : '#588BF3'"
                        size="28rpx"
                    />
                    <!-- 0下架,1上架 -->
                    <u-text
                        v-else
                        :text="item.status === 1 ? '已上架' : '已下架'"
                        :color="'#588BF3'"
                        size="28rpx"
                    />
                    <u-text
                        v-if="item.salesmanGoodsType"
                        text="章节"
                        color="#588BF3"
                        size="28rpx"
                        prefixIcon="/pages_shop1/static/img/order/orderClass.png"
                        :iconStyle="{
                            width: '44rpx',
                            height: '44rpx',
                            marginRight: '10rpx',
                        }"
                        @click="addVideoFun(item)"
                    />
                    <view class="button flex_wrap">
                        <button
                            type="default"
                            class="cancelOrderBtn"
                            @click.stop="cancelOrderBtn(item)"
                        >
                            删除
                        </button>
                        <button
                            type="default"
                            class="cancelOrderBtn"
                            v-if="
                                [0, 1, 2].includes(current) &&
                                item.status === 0 &&
                                item.checkStatus === 2
                            "
                            @click="changeStatus(item)"
                        >
                            上架
                        </button>
                        <button
                            type="default"
                            class="cancelOrderBtn"
                            v-if="
                                [0, 1, 2].includes(current) &&
                                item.status === 1 &&
                                item.checkStatus === 2
                            "
                            @click="changeStatus(item)"
                        >
                            下架
                        </button>
                        <button
                            type="primary"
                            class="payBtn"
                            @click="to_orderClass(item.id)"
                        >
                            编辑
                        </button>
                    </view>
                </view>
            </view>
        </z-paging>
        <u-modal
            :show="showCancelModal"
            title="提示"
            content="是否确认删除商品"
            @confirm="confirmCancelOrder"
            @cancel="cancelConfirm"
            showCancelButton
        >
            <view style="text-align: center">是否确认删除商品</view>
        </u-modal>
    </view>
</template>

<script>
import {
    getCustomerGoodsList,
    removeCustomerGoods,
    updateCustomerGoodsStatus,
} from "@/api/shop.js";
import {
    numAdd,
    numSub,
    numMulti,
    numDiv,
} from "@/js_sdk/nl-precisionNum/precisionNum.js";
import { formatDecimal } from "@/utils/index.js";
import { mapGetters } from "vuex";
import caches from "@/config/caches.js";
import { chickUrl } from "@/config/tendIdConfig.js";
import { encryption } from "@/utils/encryption.js";
export default {
    data() {
        return {
            showService: false,
            numAdd,
            numSub,
            numMulti,
            numDiv,
            showCancelModal: false,
            formatDecimal: formatDecimal,
            actionStyle: {
                fontSize: "28rpx",
                color: "#333",
            },
            keyword: "",
            show: false,
            current: 0,
            inactiveStyle: {
                fontSize: "32rpx",
            },
            activeStyle: {
                fontSize: "32rpx",
                fontWeight: "bold",
                color: "#588BF3",
            },
            status: "",
            checkStatusList: { 1: "审核中", 2: "已审核", 3: "未通过" },
            checkStatus: "",
            navList: [
                {
                    name: "全部",
                    status: "", //商品状态;0下架,1上架
                    checkStatus: "",
                    status: "",
                },
                {
                    name: "已上架",
                    status: 1, //商品状态;0下架,1上架
                    checkStatus: 2,
                },
                {
                    name: "待上架",
                    status: 0, //0下架,1上架
                    checkStatus: 2,
                },
                {
                    name: "审核中",
                    checkStatus: 1, //1未审核,2已审核,3未通过
                    status: "",
                },
                {
                    name: "未通过",
                    checkStatus: 3, //1未审核,2已审核,3未通过
                    status: "",
                },
            ],
            dataList: [],
            cellIconStyle: {
                width: "36rpx",
                height: "36rpx",
                marginRight: "14rpx",
            },
            servicePhone: "",
            currentId: "",
            payWay: 1, //1:'微信支付' || 2:'积分支付'
            authority: this.$store.getters?.authority ?? "customer",
        };
    },
    computed: {
        ...mapGetters(["userInfo", "isLogin"]),
    },
    beforeDestroy() {
        if (this.isLogin) {
            uni.removeStorageSync("loginBackUrl");
            uni.removeStorageSync("loginBackUrlOption");
        }
    },
    onLoad(e) {
        console.log("e :>> ", e);
    },
    onShow() {
        this.$refs.paging.reload();
    },
    methods: {
        // 上架 下架
        async changeStatus(item) {
            // <!-- 商品状态;0下架,1上架 -->
            const status = item.status === 1 ? 0 : 1;
            updateCustomerGoodsStatus({ status, goodsId: item.id }).then(
                (res) => {
                    if (res.code === 200) {
                        uni.$u.toast("提交成功");
                        this.$refs.paging.reload();
                    }
                }
            );
        },
        addVideoFun(item) {
            uni.$u.route({
                url: "pages_operate/videoPage/detail",
                params: {
                    recordType: 9,
                    videoSeries: item.videoSeries,
                    actionItemBool: 1, //1是可以删除 编辑
                },
            });
        },
        to_orderClass(id) {
            uni.navigateTo({
                url: id
                    ? `/pages_shop1/salesmanGoods/createGoods/index?id=${id}`
                    : `/pages_shop1/salesmanGoods/createGoods/index`,
            });
        },

        toreciveList(item) {
            uni.$u.route({
                url: "pages_shop1/goods/index",
                params: {
                    id: item.id,
                    addVideo: item.salesmanGoodsType ? 1 : 0,
                    salesmanGoodsType: item.salesmanGoodsType,
                },
            });
        },

        cancelOrderBtn(item) {
            this.currentId = item.id;
            this.showCancelModal = true;
        },
        cancelConfirm() {
            this.currentId = "";
            this.showCancelModal = false;
        },
        async confirmCancelOrder() {
            const that = this;
            const result = await removeCustomerGoods(this.currentId);
            uni.showToast({
                title: "商品删除成功",
                icon: "success",
                success() {
                    that.showCancelModal = false;
                    that.currentId = "";
                    that.$refs.paging.reload();
                },
            });
        },
        toDetail(item) {
            uni.$u.route({
                url: "/pages_shop1/order/order_detail/order_detail",
                params: {
                    id: item.orderNum,
                    detailStatus: 0, //1：用户中心进去的  0：客户端领取记录进去的
                },
            });
        },
        keywordSearch() {
            this.$refs.paging.reload();
        },
        orderDetail() {
            uni.navigateTo({
                url: "../order_detail/order_detail",
            });
        },
        changeType(e) {
            this.$refs.paging.reload();
        },
        click(e) {
            console.log("e :>> ", e);
            this.current = e.index;
            this.checkStatus = e.checkStatus;
            this.status = e.status;
        },
        async queryList(pageNo, pageSize) {
            const params = {
                pageNum: pageNo,
                pageSize: pageSize,
                goodsName: this.keyword,
                checkStatus: this.checkStatus,
                status: this.status,
            };
            const result = await getCustomerGoodsList(params);
            this.$refs.paging.completeByTotal(
                result.data.rows,
                result.data.total
            );
        },
    },
};
</script>

<style lang="scss" scoped>
.search {
    padding: 32rpx 28rpx;
}

.item {
    margin: 40rpx 28rpx 0;
    box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.08);
    border-radius: 12rpx;
}

.item_time {
    height: 80rpx;
    border-bottom: 2rpx solid #f3f3f3;
    padding: 0 24rpx;
}

.item_detail {
    border-bottom: 2rpx solid #f3f3f3;
    padding: 26rpx 20rpx 20rpx;

    image {
        width: 180rpx;
        height: 180rpx;
        border-radius: 8rpx;
    }
}

.total {
    display: block;
    width: 450rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-weight: 400;
    font-size: 28rpx;
    color: #333333;
}

.detail_tt {
    margin-top: 10rpx;
    font-size: 26rpx;
    color: #666666;

    text {
        margin-right: 10rpx;
    }
}

.price {
    height: 72rpx;
    text-align: right;
    font-size: 24rpx;
    color: #333333;
    line-height: 72rpx;
    margin-right: 12rpx;
    font-weight: 400;
    display: flex;
    padding: 0 20rpx;
    justify-content: flex-end;
    .price_t {
        font-size: 32rpx;
        font-weight: 400;
        color: #ff0000;
    }
}

.payBtn {
    height: 52rpx;
    line-height: 52rpx;
    font-size: 24rpx;
    margin-right: 0;
    margin-left: 0;
    background: #588bf3;
    color: #ffffff;
    border-radius: 22rpx;
    font-weight: 400;
}

.payBtn::after {
    border: none;
}

.cancelOrderBtn {
    // width: 158rpx;
    height: 52rpx;
    line-height: 52rpx;
    font-size: 24rpx;
    font-weight: 400;
    border: 1px solid #777777;
    border-radius: 22rpx;
    outline: none;
    background-color: #fff;
    margin-right: 20rpx;
}

.cancelOrderBtn::after {
    border: none;
}

.customerSerivce {
    width: 32rpx;
    height: 32rpx;
}
.bottom {
    width: 100%;
    padding: 0 30rpx 60rpx 30rpx;
    box-sizing: border-box;
}
</style>
